/*
 * @Author: hcluo
 * @Date: 2020-08-29 11:35:19
 * @LastEditors: hcluo
 * @LastEditTime: 2020-08-31 16:19:11
 * @Description:
 */
import React, { useState, useEffect } from 'react';
// import PropTypes from 'prop-types';
import VirtualScrolling from './VirtualScrolling';
import { useKeyPress } from 'ahooks';
function fakeClick(obj) {
  var ev = document.createEvent('MouseEvents');
  ev.initMouseEvent(
    'click',
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null,
  );
  obj.dispatchEvent(ev);
}

function exportRaw(name, data) {
  var urlObject = window.URL || window.webkitURL || window;
  var export_blob = new Blob([data]);
  var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
  save_link.href = urlObject.createObjectURL(export_blob);
  save_link.download = name;
  fakeClick(save_link);
}
// window.saveFile = () => {
//   exportRaw('text.txt', '123123123');
// };
export default function RightContainer(props) {
  const [data, setData] = useState(props.data);
  const [selectedIndex, setSelectedIndex] = useState([]);
  const [ctrl, setCtrl] = useState(false);

  const [shift, setShift] = useState(false);

  useKeyPress(
    event => ['Control'].includes(event.key),
    event => {
      if (event.type === 'keyup') {
        setCtrl(false);
      }
      if (event.type === 'keydown') {
        setCtrl(true);
      }
    },
    {
      events: ['keydown', 'keyup'],
    },
  );

  useEffect(() => {
    props.data.map((item, index) => {
      item.index = index;
      item.selected = false;
    });
    setData(props.data);
  }, [props.data]);

  const selected1 = item => {
    if (selectedIndex.length === 1 && !ctrl) {
      data.map((item, index) => {
        item.selected = false;
      });
    }
    data[item.index].selected = !item.selected;
    let selected = [item.index];
    if (ctrl) selected = selectedIndex;
    setSelectedIndex(selected);
    setData([...data]);
  };
  const move = type => {
    const index = selectedIndex[0];
    if ((index === 0 && type === -1) || (index === data.length - 1 && type === 1)) return;
    if (type === 1 || type === -1)
      [data[index], data[index + type]] = [data[index + type], data[index]];
    else if (type === 2) {
      let cur = data.splice(index, 1);
      data.unshift(cur[0]);
      setSelectedIndex([0]);
      setData([...data]);
      return;
    } else if (type === -2) {
      let cur = data.splice(index, 1);
      data.push(cur[0]);
      setSelectedIndex([data.length - 1]);
      setData([...data]);
      return;
    }

    setSelectedIndex([index + type]);
    setData([...data]);
  };

  const deleteItem = () => {
    const index = selectedIndex[0];
    data.splice(index, 1);
    setSelectedIndex([]);
    setData([...data]);
  };

  const deleteAll = () => {
    setSelectedIndex([]);
    setData([]);
  };

  const reserve = () => {
    let selectedIndex = [];
    data.forEach((item, index) => {
      item.selected = !item.selected;
      item.selected && selectedIndex.push(index);
    });
    setSelectedIndex(selectedIndex);
    setData([...data]);
  };

  const importData = text => {};
  const exportData = () => {
    let result = '';
    let resArr = data.map(item => `${item.windcode}  ${item.name}`);
    result = resArr.join('\n');
    exportRaw('exportData.txt', result);
  };

  window.RightFunction = (func, type) => {
    switch (func) {
      case 0:
        move(type);
        break;

      case 1:
        deleteItem();
        break;

      case 2:
        deleteAll();
        break;

      case 3:
        reserve();
        break;

      case 4:
        importData();
        break;

      case 5:
        exportData();
        break;

      default:
        break;
    }
  };

  return (
    <div className="common-right-container">
      <VirtualScrolling
        columnNum={5}
        rowNum={10}
        data={data}
        noDataTips="请选择板块"
        // renderColumn={}
        render={(item, i) => {
          return (
            <div
              key={i}
              className={item.selected ? 'item selected' : 'item'}
              onClick={() => {
                selected1(item);
              }}
            >
              <span>{item.windcode}</span> <span>[{item.name}]</span>
            </div>
          );
        }}
      />
    </div>
  );
}

RightContainer.propTypes = {};
RightContainer.defaultProps = {};
